﻿<template>
  <panel :title="title">
    <div style="text-align: center;">
      <el-image :src="$ctx+'/task/trace/photo/'+$route.query.procDefId+'/'+$route.query.id">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>
    <el-table key="detailTable" :data="taskList"
              tooltip-effect="dark" style="width: 100%">
      <el-table-column key="index" align="center" label="序号" type="index" width="55"></el-table-column>
      <el-table-column prop="name" align="center"  show-overflow-tooltip label="任务事项" ></el-table-column>
      <el-table-column prop="type" align="center" label="任务类型" ></el-table-column>
      <el-table-column prop="createTime" align="center"  show-overflow-tooltip label="接收时间"></el-table-column>
      <el-table-column align="center"  show-overflow-tooltip label="办理时间">
        <template slot-scope="item">
          {{item.row.endTime?item.row.endTime:'待办理'}}
        </template>
      </el-table-column>
      <el-table-column  align="center"  show-overflow-tooltip label="办理人">
        <template slot-scope="item">
          <span v-if="item.row.endTime">
            {{item.row.assigneeName}}
          </span>
          <el-button v-else @click="openUserDlg(item.row.id,item.row.candidate)" type="text">
          {{item.row.candidateName}}
          </el-button>
        </template>
      </el-table-column>
<!--      <el-table-column column-key="'pre_option'" align="center" label="操作" >-->
<!--        <template slot-scope="scope">-->
<!--          <text-button @click="openPage(scope.row.formKey,scope.row.projectId?scope.row.projectId:scope.row.dataId)">查看详情</text-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-dialog title="办理人" :visible.sync="userDlgVisible" :close-on-click-modal="false" width="50%">
      <el-table
        v-loading="userLoading"
        :data="taskUserList"
        tooltip-effect="dark"
        style="width: 100%">


        <el-table-column
          key="index"
          label='序号'
          type="index"
          width="55">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="left">
          <template slot-scope="scope">
            <span v-if="scope.row.id">{{scope.row.name}}</span>
            <el-select
              v-else
              filterable
              @change="(val)=>{updateSelectUser(val,scope.row)}"

              v-model="scope.row.loginName">
              <el-option
                v-for="item in userList"
                :key="item.loginName"
                :label="item.name"
                :value="item.loginName"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="loginName" show-overflow-tooltip label="登录名"/>
        <el-table-column prop="name" show-overflow-tooltip label="岗位" >
          <template slot-scope="scope">
            <span v-if="!scope.row.roleList||scope.row.roleList.length==0">无</span>
            <div v-else>
              <el-tag
                v-for="item in scope.row.roleList">
                {{item.name}}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="归属公司" >
          <template slot-scope="item">{{companyMap[item.row.companyId]?companyMap[item.row.companyId].name:''}}</template>
        </el-table-column>
        <el-table-column  v-if="checkPermission('process:update')" key="option" align="center" width="100" label="操作">
          <template slot="header">
            <el-button
              type="primary"
              size="small"
              @click="addUserRow">新增
            </el-button>
          </template>
          <template slot-scope="item">
            <el-button v-if="item.row.id" type="danger" size="small" @click="deleteTaskUser(item.row.loginName)">删除</el-button>
            <el-button v-else type="success" size="small" @click="addTaskUser(item.row.loginName)" :disabled="!item.row.loginName">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </panel>
</template>
<script>
    export default {
      name: "ProcessInstanceInfo",
      data() {
        return {
          title: "流程实例详情",
          type: "create",
          taskList:[],
            isLoading:true,
            userDlgVisible:false,
            userLoading:false,
            userList:[],
            userMap:{},
            taskUserList:[],
            companyList:[],
            comapnyMap:{},
            // roleList:[],
            currentTaskId:'',

        };
      },
      computed: {},
      created: function() {
        if (this.$route.params.type && this.$route.params.type.length > 0) {
          this.type = this.$route.params.type;
        }
        this.$emit("add-bread", {
          name: this.title,
          parent: this.$route.query.parent
        });
        this.loadTaskData();
        this.loadUserList();
        this.loadCompanyData();
        // this.loadRoleData();
      },
      mounted() {},
      watch: {
        $route(to, from) {
          this.type = to.params.type;
        }
      },
      computed: {},

      methods: {
        loadTaskData: function() {
            this.isLoading = true;
          this.$get("/task/info/" + this.$route.query.id,{},response => {
              // var list = [];
              // for(var item of response.data) {
              //     if(item.assignee||item.candidate){
              //         list.push(item);
              //     }
              // }
            // this.taskList = list;
            this.taskList = response.data;
          },() => {
              this.isLoading = false;
          });
        },
          loadUserList: function () {
              this.userLoading = true;


              this.$get("/user/data", {pageSize:-1},(data) => {
                  this.userList = data.data;
                  var map = {};
                  for(var user of this.userList) {
                      map[user.loginName] = user;
                  }
                  this.userMap = map;
              },()=>{this.userLoading = false;});
          },
          loadRoleData:function () {
              const message = this.$message;
              this.$get("/role/data",{},(data) => {
                  this.roleList = data.data;
              });
          },
          addUserRow(){
            this.taskUserList.push({});
          },
          updateSelectUser(loginName,userData) {
            for(var user of this.userList) {
                if(user.loginName != loginName) {
                    continue;
                }
                for(var key in user) {
                    if(key == 'id'){
                        continue;
                    }
                    userData[key] = user[key];
                }
                break;
            }
          },
          loadCompanyData() {
              this.$get("/company/tree",{},(data) => {
                  var list = [];

                  var map = {};
                  for(var company of data.data) {
                      map[company.id] = company;
                      list.push(company);
                      if(company.children&&company.children.length>0) {
                          for(var subcompany of company.children) {
                              map[subcompany.id] = subcompany;
                              list.push(subcompany);
                          }
                      }

                  }

                  this.companyMap = map;
                  // this.companyList = data.data;
                  this.companyList = list;
              });
          },
          openUserDlg(taskId,users) {
            this.userDlgVisible = true;
            this.currentTaskId = taskId;
            if(users==undefined) {
                users = '';
            }
            var array = users.split(',');
            // var taskUserMap = {};
            // for(var user of array){
            //     taskUserMap[user] = true;
            // }
            var list = [];

            // for(var user of this.userList){
            //     if(taskUserMap[user.loginName]) {
            //         list.push(user);
            //     }
            // }
            for(var loginName of array){
                var user = this.userMap[loginName];
                if(user) {
                    list.push(user);
                } else {
                    list.push({id:loginName,loginName:loginName,roleList:[],companyId:''})
                }
            }
            this.taskUserList = list;

          },


          addTaskUser(loginName){
              this.$post("/task/user/add",{id:this.currentTaskId,userId:loginName},(data) => {
                  this.$message.success("添加成功");
                  this.userDlgVisible=false;
                  this.loadTaskData();
              });
          },
          deleteTaskUser(loginName) {
              this.$post("/task/user/delete",{id:this.currentTaskId,userId:loginName},(data) => {
                  this.$message.success("删除成功");
                  this.userDlgVisible=false;
                  this.loadTaskData();
              });
          }
      }
    };
</script>
